<template>
	<view class="index">
		<view class="">
			<study-top></study-top>
		</view>
		<view class="Tab-Control">
			<view class="nav">
				<view v-for="item in Controlnav" :key="item.id" :class=" {
					'li': true,
					'okli': item.id === Controllistnum
				} " @click="updateControllistclass(item.id, item.router)">
					{{ item.name }}
				</view>
			</view>
			<view class="componentslist">
				<subscribeC v-show="ControlCard === 'subscribe'"></subscribeC>
				<tap-list v-show="ControlCard === 'tabList'"></tap-list>
				<evaluate v-show="ControlCard === 'evaluate'"></evaluate>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Controlnav: [
					{
						id: 0,
						name: '预约',
						router: 'subscribe'
					},
					{
						id: 1,
						name: '榜单',
						router: 'tabList'
					},
					{
						id: 2,
						name: '评价',
						router: 'evaluate'
					}
				],
				// Tab-Controllist的选中样式
				Controllistnum: 0,
				// 显示选项卡
				ControlCard: 'subscribe'
			};
		},
		methods: {
			// 切换样式
			updateControllistclass(id, router) {
				this.Controllistnum = id
				this.ControlCard = router
			}
		}
	}
</script>

<style lang="scss" scoped>
	.okli{
		transform: scale(1.2) !important;
		border-bottom: 2px solid #6bc12d;
	}
	
	.index{
		background-color: #f0f0f0;
	}
	.Tab-Control{
		padding: 30rpx 50rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 35rpx 35rpx 0 0;
		
		.nav{
			display: flex;
			padding: 0 0 20rpx 0;
			.li{
				padding: 10rpx 3rpx;
				margin-right: 80rpx;
				transition: all 0.2s;
				transform: scale(1);
			}
		}
	}
</style>
